<script setup>
import { defineProps, reactive, ref} from 'vue'
//组件参数
const props = defineProps(['show'])
const emit = defineEmits(['submit','close'])

const addDeviceFormRef = ref()
const addDeviceRules = reactive({
  pk: [
	{ required: true, message: '请输入ProductKey', trigger: 'blur' },
	{ min: 11, max: 11, message: '格式不正确', trigger: 'blur' }
  ],
  dn: [
	{ required: true, message: '请输入DeviceName', trigger: 'blur' },
	{ min: 20, max: 20, message: '格式不正确', trigger: 'blur' }
  ],
  ds: [
	{ required: true, message: '请输入DeviceSecret', trigger: 'blur' },
	{ min: 32, max: 32, message: '格式不正确', trigger: 'blur' }
  ],
})
const addDeiceFormData = reactive({
	showDialog: false,
	data: {},
})

const closeAddDeviceForm= (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  //关闭表单
  emit('close')
}

const resetAddDeviceForm= (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<template>
	<!-- 新增设备表单 -->
	<el-dialog v-model="props.show" title="新增设备" width="500" @close = "closeAddDeviceForm(addDeviceFormRef)">
		<el-form label-width="auto" ref="addDeviceFormRef" :model="addDeiceFormData.data" :rules="addDeviceRules">
			<el-form-item label="ProductKey" prop="pk">
				<el-input v-model="addDeiceFormData.data.pk" />
			</el-form-item>
			<el-form-item label="DeviceName" prop="dn">
				<el-input v-model="addDeiceFormData.data.dn" />
			</el-form-item>
			<el-form-item label="DeviceSecret" prop="ds">
				<el-input v-model="addDeiceFormData.data.ds" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeAddDeviceForm(addDeviceFormRef)">取消</el-button>
				<el-button type="primary" @click="emit('submit', addDeviceFormRef, addDeiceFormData.data)">提交</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<style>
</style>